<template>
    <div class="page">
        <div class="search" style="padding-right:1%">
            <el-row style="padding-bottom:1%">
                <el-col :span="5" :offset="13">
                    <span>用户类型</span>
                    <el-select v-model="user_type" size="small" style="width: 60%">
                        <el-option label="普通用户" value="0"></el-option>
                        <el-option label="会员" value="1"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="searchUserList(1)">搜 索</el-button>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" plain @click="getUserList(1)">查看全部</el-button>
                </el-col>
            </el-row>
            <el-row class="btn-group">
                <el-col :span="3" :offset="18">
                    <el-button type="primary" @click="editUser({},false)">新建用户</el-button>
                </el-col>
                <el-col :span="3">
                    <el-button type="warning" v-print="'#printContent'">打印表格</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="userList" border id="printContent">
            <el-table-column prop="user_id" label="编号" width="110" sortable></el-table-column>
            <el-table-column prop="user_name" label="姓名" width="110"></el-table-column>
            <el-table-column prop="user_idCard" label="证件编号" ></el-table-column>
            <el-table-column prop="user_type" label="用户类型">
                <template slot-scope="scope">
                    {{userType[scope.row.user_type]}}
                </template>
            </el-table-column>
            <el-table-column prop="user_phone" label="联系方式"></el-table-column>
            <el-table-column prop="user_email" label="邮箱" ></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="option" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button size="small" type="warning" @click="editUser(scope.row,true)" plain>编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination :current-page.sync="currentPage" :page-size="10" :total="count"
                layout="prev, pager, next, jumper" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <el-dialog title="编辑数据" :visible.sync="dialogVisible">
            <userEditor :form ="user" :disable="isEdit"
                @closeDialog="dialogVisible=false" @refresh="refresh"></userEditor>
        </el-dialog>
    </div>
</template>
<script>
import userEditor from './base/user-editor';
export default {
    name:'user',
    components:{
        userEditor
    },
    data(){
        return{
            userList:[],
            dialogVisible:false,
            user:{},
            isEdit:false,
            userType:["普通用户","会员"],
            currentPage:1,
            count:0,
            isSearch:false,
            user_type:''
        }
    },
    methods:{
        getUserList(page){
            this.currentPage = page
            this.isSearch = false
            this.user_type=""
            this.$http.get(`/api/user/getUserList?page=${page}`).then((res)=>{
                console.log(res);
                this.userList = res.data.list;
                this.count = res.data.count;
            }).catch((err)=>{
                console.log(err);
            })
        },
        searchUserList(page){
            if(this.checkEmpty(this.user_type, "用户类型")){
                return;
            }
            this.currentPage = page
            this.isSearch=true
            this.$http.get(`/api/user/searchUserList?page=${page}&user_type=${this.user_type}`).then((res)=>{
                console.log(res);
                this.userList = res.data.list;
                this.count = res.data.count;
            }).catch((err)=>{
                console.log(err);
            })
        },
        handleCurrentChange(page){
            if(this.isSearch){
                this.searchUserList(page)
            }else{
                this.getUserList(page)
            }
        },
        deleteUser(user){
            this.$confirm('是否确认删除该用户信息?','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                let id = user.user_id;
                this.$http.post("/api/user/deleteUser",{
                    user_id:id
                }).then((res)=>{
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        let index = this.userList.findIndex(obj => obj.user_id == user.user_id)
                        this.userList.splice(index, 1);
                    }
                })
            })
        },
        editUser(user,isEdit){
            this.user = user
            this.isEdit = isEdit
            this.dialogVisible = true;
        },
        refresh(){
            this.getUserList(this.currentPage);
        }
    },
    mounted(){
        this.getUserList(1);
    }
}
</script>